<template>
    <el-upload :file-list="fileList" action="action" :on-preview="handlePreview" :on-remove="handleRemove"
        :before-remove="beforeRemove" :http-request="handleHttpRequest" multiple
        accept="jpg, jpeg, png, gif, webp, bmp, txt, pdf, xlsx ,xls ,doc, docx, zip ,rar, ppt, pptx, mp3">
        <el-button type="primary">点击上传</el-button>
        <template #tip>
            <div class="el-upload__tip">
                请上传不超过100M的文件
            </div>
        </template>
    </el-upload>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'

import type { UploadProps, UploadUserFile } from 'element-plus'
import { FileUpload } from '@/api/UploadFile'

let fileList = ref<UploadUserFile[]>([
    {
        name: 'element-plus-logo.svg',
        url: 'https://element-plus.org/images/element-plus-logo.svg',
    },
])

let forms: any = null

const handleRemove: UploadProps['onRemove'] = (file, uploadFiles) => {
    fileList.value = uploadFiles;
}

const handlePreview: UploadProps['onPreview'] = (uploadFile) => {
    const el = document.createElement("a");
    el.style.display = "none";
    el.target = "_blank";
    el.download = uploadFile.name;
    el.href = uploadFile.url || '';
    document.body.appendChild(el);
    el.click();
    document.body.removeChild(el);
}

const beforeRemove: UploadProps['beforeRemove'] = (uploadFile, uploadFiles) => {
    return ElMessageBox.confirm(
        `确定删除文件：${uploadFile.name}？`, 'Warning',
    ).then(
        () => {
            ElMessage({
                type: 'success',
                message: '删除成功！',
            })
            return true
        },
        () => false
    )
}

// @ts-ignore
const handleHttpRequest: UploadProps['httpRequest'] = (param) => {
    if (param.file.size > 100 * 1024 * 1024) {
        return ElMessage.error('文件过大！请上传不超过100M的文件')
    }
    if (forms) {
        forms.append("files", param.file); // 此处files需要根据后端需要的字段来命名
    } else {
        forms = new FormData();
        forms.append("files", param.file);
        setTimeout(() => {
            // 模拟接口
            setTimeout(() => {
                // 模拟返回值
                let res = [
                    { fileName: '后端返回的文件名', url: '后端返回的文件url' }
                ]
                res.forEach(el => {
                    let obj = {
                        name: el.fileName,
                        fileId: el.url,
                        ...param,
                    };
                    param.onSuccess(obj);
                    let files = fileList.value;
                    files.push(obj);
                    fileList.value = files;
                })

                ElMessage({
                    message: '上传成功！',
                    type: 'success',
                })
            }, 1000)
            // 真实后端用以下接口
            // FileUpload(form).then(res => {
            //     console.log(res)
            //     ElMessage({
            //         message: '上传成功！',
            //         type: 'success',
            //     })
            // })
        });
    }
}
</script>

<style lang="less" scoped>

</style>